<template>
  <el-form  label-width="120px" v-model="form" class="ml-4 mt-4">
    <el-form-item label="请选择数据集" >
      <el-select  placeholder="please select your resultSet" v-model="form.taskId" @change="handleSelectChange" clearable>
        <el-option :key="option.taskId" :label="option.name" :value="option.taskId" v-for="option in resultSetForm"/>
      </el-select>
    </el-form-item>

    <el-form-item label="请选择操作字段" >
      <el-select v-model="form.actionField"  placeholder="please select your Field">
        <el-option :key="option" :label="option" :value="option" v-for="option in fields"/>
      </el-select>
    </el-form-item>

    <el-form-item label="是否去除停用词">
      <el-switch v-model="form.removeStopWord" />
    </el-form-item>

    <el-form-item label="是否去重">
      <el-switch v-model="form.removeRepeat" />
    </el-form-item>

    <el-form-item label="是否过滤空值">
      <el-switch v-model="form.filterEmpty" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="updateStaus">刷新</el-button>

      <el-icon v-if="downLoadFile==='1'" class="ml-10" @click="download1"><Download /></el-icon>
    </el-form-item>
  </el-form>



</template>

<script  setup>

import {onMounted, reactive, ref} from 'vue'
import {doGet, doPost} from "../../api";
import {Download} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const resultSetForm = ref([])

const downLoadFile = ref()

const fields=ref([])

const form=reactive({
  taskId:null,
  actionField:null,
  filterEmpty:null,
  removeRepeat:null,
  removeStopWord:null
})

const onSubmit = () => {
  if (form.taskId===null||form.actionField===null){
    ElMessage({
      message: '请配置数据集或字段',
      type: 'warning',
    })
  }else {
    downLoadFile.value='0'
    doPost("/api/dataDisposal/publicDataTask",form,resp=>{
      if (resp.code===1){
        ElMessage({
          message: resp.data,
          type: 'success',
        })
      }else {
        ElMessage({
          message: '请求失败',
          type: 'error',
        })
      }
    })
  }
}
const download1 = () => {
  if (form.taskId===null){
    ElMessage({
      message: '请配置数据集',
      type: 'warning',
    })
  }else {
    let index=form.taskId
    axios({
      method: 'get',
      url: "/api/dataDisposal/download?taskId="+index,
      responseType: 'blob', // 响应类型设置为 blob
    })
        .then((response) => {
          if (response.status === 200) {
            const contentDisposition = response.headers['content-disposition'];
            const match = contentDisposition.match(/filename="(.+)"/);
            let filename = 'file.xlsx'; // 默认文件名

            if (match && match[1]) {
              // 解码文件名
              filename = decodeURIComponent(match[1]);
              console.log(filename)
            }

            const blob = new Blob([response.data], { type: response.headers['content-type'] });
            const url = window["URL"].createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window["URL"].revokeObjectURL(url);
          }
        })
        .catch((error) => {
          console.error('Axios error:', error);
        });
  }

}

const updateStaus=()=>{
  if (form.taskId===null){
    ElMessage({
      message: '请配置数据集',
      type: 'warning',
    })
  }else {

    doGet("/api/dataDisposal/updateStaus?taskId="+form.taskId,null,resp=>{
      if (resp.code===1){
        if (resp.data==='1'){
          downLoadFile.value='1'
          ElMessage({
            message: '处理成功',
            type: 'success',
          })
        }else {
          ElMessage({
            message: '正在处理中，稍后在试',
            type: 'error',
          })
        }
      }else {
        ElMessage({
          message: '请求失败',
          type: 'error',
        })
      }
    })

  }

}

onMounted(() => {
  // 在组件挂载到页面之后执行的逻辑
  // 可以在这里调用加载数据的函数
  loadData();
});

const handleSelectChange = () => {

  const selectedOption = resultSetForm.value.find(option => option.taskId === form.taskId);

  if (selectedOption) {
    downLoadFile.value = selectedOption.dataDisposal;
  }

  // 这个函数会在选择框的值发生变化时触发
  if (resultSetForm.value) {
    form.actionField=null
    form.filterEmpty=null
    form.removeRepeat=null
    form.removeStopWord=null
    callbackFunction(form.taskId);
  }
};

const callbackFunction = (taskId) => {
  // 在这里编写你的回调函数的逻辑
  doGet("/api/dataDisposal/getFields?taskId="+taskId,null,resp=>{
      fields.value=resp.data
  })

}

const loadData=()=>{
  doGet("/api/dataDisposal/list",null,resp=>{
    resultSetForm.value=resp.data
  })
}

</script>

<style scoped>

</style>